<!DOCTYPE html>
<html>
    <head>
        <title>预约详情</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

        <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
              ">

        <link rel="stylesheet" href="${basePath}/css/weui.min.css">
        <link rel="stylesheet" href="${basePath}/css/jquery-weui.css">
        <link rel="stylesheet" href="${basePath}/css/demos.css">

        <style>
            .payment .weui-media-box__hd{
                color: #999;
                padding-left: 10px;
                width: 40%;
                text-align: left;
            }
            .comment .weui-media-box__hd{
                color: #999;
                padding-left: 10px;
                text-align: left;
            }
        </style>
    </head>

    <body ontouchstart class="detail">

        <header class='demos-header'>
            <h1 class="demos-title">${order.product.type}</h1>
        </header>
        <div class="page__bd">
            <div class="weui-panel weui-panel_access">
                <div class="weui-panel__bd">
                    <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                        <div class="weui-media-box__hd">
                            <img src="${basePath}/icon.img?doctorId=${order.doctor.id?c}" alt="" style="width:65px;height:90px;">
                        </div>
                        <div class="weui-media-box__bd">
                            <h4 class="weui-media-box__title">
                                <strong>${order.doctor.name}</strong>
                            </h4>
                            <input type="hidden" id="orderId" value="${order.id?c}"/>
                            <p class="weui-media-box__desc">${order.doctor.departmentName} ${order.doctor.titleName}</p>
                        </div>
                        <div class="weui-media-box__bd">
                            <h4 class="weui-media-box__title" style="text-align: center;">
                                ￥<strong>${order.price}</strong>
                            </h4>
                        </div>
                    </a>
                </div>
            </div>


            <div class="weui-panel weui-panel_access">
                <div class="weui-panel__bd">
                    <div class="weui-media-box weui-media-box_text">
                        <h4 class="weui-media-box__title">备注</h4>
                        <p class="weui-media-box__desc">${order.memo!}</p>
                    </div>
                </div>
            </div>


            <div class="weui-panel weui-panel_access">
                <div class="weui-panel__bd">
                    <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                        <div class="weui-media-box__hd" style="height:30px;line-height: 30px;">
                            <h4 class="weui-media-box__title" style="text-align: left;">预约状态</h4>
                        </div>
                        <div class="weui-media-box__bd">
                            <p class="weui-media-box__desc">
                            <#if order.status=-1>
                                <span class="status-process">已取消</span>
                            </#if>
                            <#if order.status=0>
                                <span class="status-process">已预约</span>
                            </#if>
                            <#if order.status=1>
                                <span class="status-process">已付预款</span>
                            </#if>
                            <#if order.status=2>
                                <span class="status-process">已付款</span>
                            </#if>
                            <#if order.status=3>
                                <span class="status-success">已完成</span>
                            </#if>
                            </p>
                        </div>
                    </a>
                </div>
            </div>


            <div class="weui-panel weui-panel_access payment">
                <div class="weui-panel__bd">
                    <div class="weui-media-box weui-media-box_text">
                        <h4 class="weui-media-box__title">支付信息</h4>
                        <#if order.status=0>
                            <div class="weui-media-box_appmsg">
                                <div class="weui-media-box__hd" style="height:30px;line-height: 30px;">
                                    <h4 class="weui-media-box__title">尚无支付信息</h4>
                                </div>
                            </div>
                        </#if>
                        <#list order.payments as payment>
                        <div class="weui-media-box_appmsg">
                            <div class="weui-media-box__hd" style="height:30px;line-height: 30px;">
                                <h4 class="weui-media-box__title">${payment.transaction}</h4>
                            </div>
                            <div class="weui-media-box__bd">
                                <p class="weui-media-box__desc">
                                    <span class="status-process">${payment.payAmmount?c}￥</span>
                                </p>
                            </div>
                            <div class="weui-media-box__bd">
                                <p class="weui-media-box__desc">
                                    <span class="status-process">${payment.date}</span>
                                </p>
                            </div>
                        </div>
                        </#list>

                    </div>
                </div>
            </div>
        <#if order.status=0>
            <div class="button_sp_area">
                <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary payone" >付预付款</a>
                <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default cancel" >取消预约</a>
            </div>
        </#if>
        <#if order.status=1>
            <div class="button_sp_area">
                <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default cancel" >取消预约</a>
            </div>
        </#if>
        <#if order.status=2>
            <div class="button_sp_area">
                <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default cancel" >取消预约</a>
            </div>
        </#if>
        <#if order.status=3>
            <div class="weui-panel weui-panel_access comment">
                <div class="weui-panel__bd">
                    <div class="weui-media-box weui-media-box_text">
                        <h4 class="weui-media-box__title">评论</h4>

                        <#list order.comments as comment>
                            <div class="weui-media-box_appmsg">
                                <div class="weui-media-box__hd" style="height:30px;line-height: 30px;min-width: 60px;">
                                    <h4 class="weui-media-box__title">${comment.date}</h4>
                                </div>
                                <div class="weui-media-box__bd">
                                    <p class="weui-media-box__desc">
                                        <span class="status-process">医生评价：${comment.doctorScoreStr}</span>
                                    </p>
                                </div>
                                <div class="weui-media-box__bd">
                                    <p class="weui-media-box__desc">
                                        <span class="status-process">服务评价：${comment.serverScoreStr}</span>
                                    </p>
                                </div>
                            </div>
                            <div class="weui-media-box_appmsg">
                                <div class="weui-media-box__hd" style="height:30px;line-height: 30px;">
                                </div>
                                <div class="weui-media-box__bd">
                                    <p class="weui-media-box__desc">
                                        <span class="status-process">${comment.comment}</span>
                                    </p>
                                </div>
                            </div>
                        </#list>

                    </div>
                </div>
            </div>

            <div class="button_sp_area">
                <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary addcomment" >添加评论</a>
            </div>
        </#if>

        </div>
        <script src="${basePath}/js/jquery-2.1.4.js"></script>
        <script src="${basePath}/js/fastclick.js"></script>
        <script src="${basePath}/js/jquery-weui.js"></script>
        <script>
            $(function () {
                FastClick.attach(document.body);
            });

            $(document).on("click", ".cancel", function() {
                $.confirm("您确定要取消该预约吗?", "确认删除?", function() {
                    var orderId='${order.id?c}';
                    $.ajax({
                        type: "get",
                        async: false,
                        url: '${basePath}/cancelOrder.json',
                        data: {
                            orderId:orderId
                        },
                        success: function (data) {
                            window.location.reload();
                        }
                    });
                }, function() {
                    //取消操作
                });
            });
            $(document).on("click", ".payone", function() {
                var orderId=$('#orderId').val();
                window.location.href =  '${basePath}/payOrder.htm?orderId='+orderId;
            });


            $(document).on("click", ".addcomment", function () {
                var a = $(this)[0];
                var typeId = a.id;
                var doctorId = $('#doctorId').val();
                var title = a.innerHTML;
                $.modal({
                    title: title,
                    text: '<div class="weui-cells weui-cells_form" style="margin-top:0px;">'+
                        '<div class="weui-cell weui-cell_select weui-cell_select-after">'+
                        '<div class="weui-cell__hd">'+
                        '<label for="" class="weui-label" style="color: black;text-align: left;">医生打分：</label>'+
                        '</div><div class="weui-cell__bd">'+
                        '<select class="weui-select" name="select2" id="doctorScore">'+
                        '<option value="5">非常满意</option>'+
                        '<option value="4" selected>满意</option>'+
                        '<option value="3">一般</option>'+
                        '<option value="2">不满意</option>'+
                        '<option value="1">非常满意</option>'+
                        '</select></div></div></div>'+
                        '<div class="weui-cells weui-cells_form" style="margin-top:0px;">'+
                        '<div class="weui-cell weui-cell_select weui-cell_select-after">'+
                        '<div class="weui-cell__hd">'+
                        '<label for="" class="weui-label" style="color: black;text-align: left;">服务打分：</label>'+
                        '</div><div class="weui-cell__bd">'+
                        '<select class="weui-select" name="select2" id="serverScore">'+
                        '<option value="5">非常满意</option>'+
                        '<option value="4" selected>满意</option>'+
                        '<option value="3">一般</option>'+
                        '<option value="2">不满意</option>'+
                        '<option value="1">非常满意</option>'+
                        '</select></div></div></div>'+
                        '<div class="weui-cells weui-cells_form" style="margin-top:0px;">'+
                        '<div class="weui-cell weui-cell_switch">'+
                        '<div class="weui-cell__bd" style="color: black;text-align: left;">文字描述</div>'+
                        '</div><div class="weui-cell" style="border: 1px solid #d9d9d9;"><div class="weui-cell__bd">'+
                        '<textarea class="weui-textarea" id="comment" name="comment" placeholder="请输入描述" rows="3"></textarea>'+
                        '</div></div></div>',
                    buttons: [
                        {text: "确认", onClick: function () {

                            var orderId=$("#orderId").val();
                            var comment=$("#comment").val();
                            if(comment.length==0){
                                $.toast("描述不能为空", "forbidden");
                                return false;
                            }
                            var doctorScore=$("#doctorScore").val();
                            var serverScore=$("#serverScore").val();
                            var data={
                                orderId: orderId,
                                doctorScore: doctorScore,
                                serverScore: serverScore,
                                memo: comment
                            }
                            $.ajax({
                                type: "post",
                                async: false,
                                url: '${basePath}/addComment.json',
                                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                                data: data,
                                success: function (data) {
                                    window.location.reload();
                                }
                            });

                         }},
                        {text: "取消", className: "default"},
                    ]
                });
            });
        </script>

    </body>
</html>
